<template>
    <div>
        <Bread title="Report management / Query Handover"/>
        <el-row :gutter="40">
            <el-col :span="7">
                <el-card shadow="never" class="form-card">
                    <div slot="header">
                        <span style="font-weight: bold">Query Condition</span>
                    </div>
                    <el-form ref="searchHandoverForm"
                             :model="searchHandoverForm"
                             :rules="searchHandoverRules"
                             size="medium"
                             label-width="100px"
                             label-position="left">
                        <el-card shadow="never">
                            <span style="font-weight: bold">Remove From</span>

                            <el-row type="flex" justify="start" align="top">
                                <el-form-item label="Department" prop="deptRemove">
                                    <el-select v-model="searchHandoverForm.deptRemove" placeholder="Please choose sales department" filterable clearable
                                               :style="{width: '120%'}">
                                        <el-option v-for="(item, index) in options.customerMgrDeptOptions" :key="index" :label="item.label"
                                                   :value="item.value" :disabled="item.disabled"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-row>
                            <el-row type="flex" justify="start" align="top">
                                <el-form-item label="Manager" prop="mgrRemove">
                                    <el-select v-model="searchHandoverForm.mgrRemove" placeholder="Please choose customer manager" filterable clearable
                                               :style="{width: '120%'}">
                                        <el-option v-for="(item, index) in options.customerMgrNameOptionsStr" :key="index" :label="item.label"
                                                   :value="item.value" :disabled="item.disabled"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-row>
                        </el-card>

                        <el-card shadow="never" style="margin-top: 10px">
                            <span style="font-weight: bold">Receive To</span>
                            <el-row type="flex" justify="start" align="top">
                                <el-form-item label="Customer Name" prop="customerName">
                                    <el-input v-model="searchHandoverForm.customerName" placeholder="Please input customer name" clearable :style="{width: '120%'}">
                                    </el-input>
                                </el-form-item>
                            </el-row>
                            <el-row type="flex" justify="start" align="top">
                                <el-form-item label="Chance Name" prop="chanceName">
                                    <el-input v-model="searchHandoverForm.chanceName" placeholder="Please input chance name" clearable :style="{width: '120%'}">
                                    </el-input>
                                </el-form-item>
                            </el-row>
                            <el-row type="flex" justify="start" align="top">
                                <el-form-item label="Department" prop="deptReceive">
                                    <el-select v-model="searchHandoverForm.deptReceive" placeholder="Please choose sales department" filterable clearable
                                               :style="{width: '120%'}">
                                        <el-option v-for="(item, index) in options.customerMgrDeptOptions" :key="index" :label="item.label"
                                                   :value="item.value" :disabled="item.disabled"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-row>
                            <el-row type="flex" justify="start" align="top">
                                <el-form-item label="Manager" prop="mgrReceive">
                                    <el-select v-model="searchHandoverForm.mgrReceive" placeholder="Please choose customer manager" filterable clearable
                                               :style="{width: '120%'}">
                                        <el-option v-for="(item, index) in options.customerMgrNameOptionsStr" :key="index" :label="item.label"
                                                   :value="item.value" :disabled="item.disabled"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-row>
                        </el-card>

                        <el-form-item size="large" style="float: right; margin-top: 10px">
                            <el-button type="primary" icon="el-icon-search" size="medium" @click="submitSearch"> Search </el-button>
                            <el-button @click="resetSearch">Reset</el-button>
                        </el-form-item>

                    </el-form>
                </el-card>
            </el-col>

            <el-col span="16">
                <el-card class="table-card">
                    <div slot="header">
                        <span style="font-weight: bold">Query Result</span>
                        <el-button size="medium"
                                   style="float: right; " @click="export2Excel">Export
                        </el-button>
                    </div>
                    <el-table
                        id="handoverTable"
                        v-loading="this.$store.getters.isLoading"
                        :data="handoverTable"
                        :header-cell-style="{fontSize:'12px',background:'#eef1f6',color:'#495085'}"
                              ref="handoverTable"
                              @selection-change="handleSelectionChange">
                        <el-table-column
                            type="selection"
                            width="55">
                        </el-table-column>
                        <el-table-column
                            prop="deptRemove"
                            label="Department Remove From"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="deptReceive"
                            label="Department Receive To"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="mgrRemove"
                            label="Manager Remove From"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="mgrReceive"
                            label="Manager Receive To"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="customerId"
                            label="Customer ID"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="customerName"
                            label="Customer Name"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="chanceId"
                            label="Chance ID"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="chanceName"
                            label="Chance Name"
                            width="120">
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Bread from "@/components/Bread/Bread";
import {options} from "@/data/const"
export default {
    name: "SearchHandover",
    components: {Bread},
    props: [],
    data() {
        return {
            options: options,
            searchHandoverForm: {
                customerName: null,
                chanceName: null,
                deptRemove: null,
                deptReceive: null,
                mgrRemove: null,
                mgrReceive: null,
            },
            searchHandoverRules: {},

            handoverTable: [],

            chanceNameOptions: [{
                "label": "选项一",
                "value": 1
            }, {
                "label": "选项二",
                "value": 2
            }],
        }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
        submitSearch() {
            this.$refs['searchHandoverForm'].validate(valid => {
                if (!valid) return

                console.log(this.searchHandoverForm)
                this.$axios.post("/handover/customerHandover/searchCustomerHandover", this.searchHandoverForm).then(e => {
                    console.log(e)
                    if(e.data.status === 200){
                        this.handoverTable = e.data.obj
                    }else{
                        this.handoverTable= []
                    }
                    this.$message.success(e.data.msg)
                })
            })
        },
        resetSearch() {
            this.$refs['searchHandoverForm'].resetFields()
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        export2Excel: function() {
            let tables = document.getElementById("handoverTable");
            let table_book = this.$XLSX.utils.table_to_book(tables);
            var table_write = this.$XLSX.write(table_book, {
                bookType: "xlsx",
                bookSST: true,
                type: "array"
            });
            try {
                this.$FileSaver.saveAs(
                    new Blob([table_write], { type: "application/octet-stream" }),
                    "handover.xlsx"
                );
            } catch (e) {
                if (typeof console !== "undefined") console.log(e, table_write);
            }
            return table_write;
        }
    }
}
</script>

<style scoped>
.form-card {
    width: 100%;
    height: 750px;
    border-radius: 15px;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
}
.table-card {
    width: 100%;
    border-radius: 15px;
    height: 750px;
}
</style>